import React, {useState, useRef} from "react"
import {connect,} from 'react-redux'
import {WhiteSpace, WingBlank, InputItem, List, Icon,} from "antd-mobile"

import GoBackLayout from "../../../../layouts/GoBackLayout/GoBackLayout"
import CustomButton from "../../../../shared-components/CustomButton/CustomBotton"
import './comment.css'
import ClickableBtn from "../../../../shared-components/ClickableBtn/ClickableBtn";
import FormInput from "../../../../shared-components/FormInput/FormInput";
import LocalStorageService from "../../../../utils/LocalStorageService";
import UploadImage from "../../../../utils/image";


const Comment = props => {

    const l = [
        {
            title: '性能问题',
            active: false,
        },
        {
            title: '支付问题',
            active: false,
        },
        {
            title: '功能建议',
            active: false,
        },
        {
            title: '提现问题',
            active: false,
        },
        {
            title: '其他问题',
            active: false,
        },
    ]

    const [QType, setQType] = useState(-1)
    const [QList, setQList,] = useState(l)
    const [detail, setDetail,] = useState('')
    const [title, setTitle] = useState('')
    const [file, setFile,] = useState(null)
    const [contact, setContact] = useState('')
    const [thumb, setThumb,] = useState('')
    const imgRef = useRef(null)
    const toggleActive = index => {
        const l = [...QList]
        for (let i = 0; i < l.length; i++) {

            if (index === i) {
                l[i].active = !QList[index].active
                setQType(i)
            } else {
                l[i].active = false
            }
        }
        setQList(l)
    }

    const upload = (e) => {
        const fs = e.target.files
        const img = fs[0]
        setFile(img)
        // drawImamge(file, canvasRef)
        const imgHandler = new UploadImage(img)
        const callback = (base64) => {
            setThumb(base64)
        }
        // imgHandler.drawImage({imgRef: imgRef.current, callback,})
        imgHandler.changeFileToBaseURL(img).then((base64) => {
            setThumb(base64)
        })
    }

    const emptyForm = () => {
        setQType(-1)
        setDetail('')
        setQList(l)
        setTitle('')
        setFile(null)
        setContact('')
    }


    const submit = () => {
        // style //问题类型
        // txt //内容描述
        // contact //联系方式
        // img //file类型的图片
        const style = QType
        const txt = detail
        const img = file
        const fd = new FormData()
        const uid = LocalStorageService.get('userid')
        fd.append('style', style)
        fd.append('txt', txt)
        fd.append('img', img)
        fd.append('contact', contact)
        fd.append('title', title)
        fd.append('uid', uid)

        props.doFeedback(fd).then(() => {
            emptyForm()
        })

        // const img
    }

    const QListTemplate = (
        <div style={container}>
            <WingBlank>
                <div style={titleStyle}>问题分类</div>
                <div style={QListContainerStyle}>
                    {
                        QList.map((Q, index) => (
                            <ClickableBtn
                                onClick={() => toggleActive(index)}
                                active={`${Q.active}`}
                                key={Q.title}
                            >
                                {Q.title}
                            </ClickableBtn>
                        ))
                    }
                </div>
            </WingBlank>

        </div>
    )

    const textAreaContainer = {
        backgroundColor: '#fff',
    }

    const titleInput = <div>
        {/*<WingBlank>*/}
            {/*<p>反馈标题</p>*/}
            <List>
                <InputItem
                    value={title}
                    onChange={(v) => setTitle(v)}
                    // onChange={(v) => setContact(v)}
                    placeholder='标题不超过20字'
                >反馈标题</InputItem>
            </List>
    </div>

    const textAreaTemplate = (
        <div style={container}>
            <div style={textAreaContainer}>
                <WingBlank>
                    <div style={titleStyle}>反馈内容</div>
                    <textarea
                       // style={textareaStyle}
                       className='gray-textarea'
                       placeholder='请详细描述您的问题…'
                       value={detail}
                       onChange={(e) => setDetail(e.target.value)}
                    />
                </WingBlank>
            </div>
        </div>
    )

    const imagePickerStyle = {
        height: '68px',
        width: '68px',
        textAlign: 'center',
        lineHeight: '68px',
        backgroundColor: 'rgb(248,248,248)',
        position: 'relative',
    }

    const ImagePickerContainerStyle = {
        paddingBottom: '16px',
        position: 'relative',
    }

    const imagePicker = <div style={imagePickerStyle}>
        +
        <input
            value=''
            type="file"
            capture="camera"
            style={{position: 'absolute', left: 0, top: 0, opacity: 0, height: '68px', width: '68px',}}
            onChange={(e) => upload(e)}
        />
    </div>

    const thumbImg = <div className='flex-align-center'>
        <img
            alt=''
            src={thumb}
            ref={imgRef}
            style={{width: 68}}
        />
        <Icon type='cross-circle' onClick={() => setFile(null)}/>
    </div>

    const ImagePickerTemplate = (
        <div style={container}>
            <div
                style={ImagePickerContainerStyle}
                // onClick={}
            >

                <WingBlank>
                    <div style={titleStyle}>图片</div>
                    {file ? thumbImg : imagePicker}
                </WingBlank>

            </div>
        </div>
    )



    const contactContainerStyle = {
        backgroundColor: '#fff',
        paddingTop: '24px',
    }
    const btnContainerStyle = {
        backgroundColor: '#fff',
        paddingTop: '32px',
        paddingBottom: '24px',
    }
    const btnTemplate = (
        <div style={btnContainerStyle}>
            <WingBlank>
                <CustomButton
                    shadow='true'
                    onClick={() => submit()}
                >提交</CustomButton>
            </WingBlank>
        </div>
    )
    const contactTemplate = (
        <div style={contactContainerStyle}>
            <List>
                <InputItem
                    value={contact}
                    onChange={(v) => setContact(v)}
                    placeholder='手机号码/QQ号码'
                >联系方式</InputItem>
            </List>
            {btnTemplate}
        </div>
    )

    const rightContent = (
        <div style={{color: '#333', opacity: 0.8}}
             onClick={() => props.history.push('../feedback-list')}
        >
            反馈记录
        </div>
    )

    return(
        <GoBackLayout
            title='留言反馈'
            rightContent={rightContent}
            history={props.history}
        >
            {QListTemplate}
            <WhiteSpace/>
            {titleInput}
            <WhiteSpace/>
            {textAreaTemplate}
            {ImagePickerTemplate}
            <WhiteSpace/>
            {contactTemplate}
        </GoBackLayout>
    )
}

const mapState = state => ({
    user: state.user,
})

const mapDispatch = dispatch => ({
    doFeedback: (payload) => dispatch.user.doFeedback(payload),
})

export default connect(mapState, mapDispatch)(Comment)

const container = {
    backgroundColor: '#fff',
    paddingTop: '16px',
}

const titleStyle = {
    paddingBottom: '16px',
}

const QListContainerStyle = {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'start',
}
